<template>
  <el-container class="view-configure">
    <el-aside width="180px">
      <el-scrollbar height="100%">
        <el-menu :default-active="classifyAction.key">
          <template v-for="item in classify">
            <template v-if="item.show">
              <el-sub-menu v-if="item.children && item.children.length>0" :index="item.key">
                <template #title>
                  <span>{{ item.label }}</span>
                </template>
                <template v-for="row in item.children">
                  <el-menu-item v-if="row.show" @click="setClassifyAction(row)" :index="row.key">
                    <span>{{ row.label }}</span>
                  </el-menu-item>
                </template>
              </el-sub-menu>
              <el-menu-item v-else :index="item.key" @click="setClassifyAction(item)">
                <span>{{ item.label }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-main>
      <el-card>
        <view-form v-if="classifyAction.key.length>0" @success="SubmitSuccess" :api="getFormDataApi" :query="{key:classifyAction.key}"></view-form>
      </el-card>
    </el-main>
  </el-container>
</template>
<script lang="ts">
import {defineComponent, onActivated, ref} from "vue"
import {getClassifyDataApi, getFormDataApi} from "@/apps/admin/api/system/configure"
import ViewForm from "@/components/DynamicForm/ViewForm.vue"
import bus from "@/units/bus"

export default defineComponent({
  components: {ViewForm},
  setup() {
    const classify = ref([])//配置分类
    const classifyAction = ref({key: '', label: ''})//当前选中

    /**
     * 获取配置分类
     */
    function getConfigureClassify() {
      getClassifyDataApi().then(result => {
        if (result.code === 200) {
          classify.value = result.data
          if (classifyAction.value.key.length === 0 && result.data.length > 0) {
            setClassifyAction(result.data[0])
          }
        }
      })
    }

    function setClassifyAction(row) {
      classifyAction.value = {...row}
    }


    /**
     * 成功提交事件
     * @constructor
     */
    function SubmitSuccess() {
      bus.emit('reload-configure', undefined)
    }

    onActivated(() => {
      getConfigureClassify()
    })

    return {
      classify,
      classifyAction,
      getFormDataApi,
      setClassifyAction,
      SubmitSuccess
    }
  }
})
</script>
<style lang="scss" scoped>
.view-configure {
  :deep(.el-aside) {
    height: var(--ach);
    background-color: var(--el-menu-bg-color);

    .el-menu {
      border-color: var(--el-menu-bg-color);
      overflow: hidden scroll;
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
      &::-webkit-scrollbar {
        display: none;
      }

    }
  }

  :deep(.el-main) {
    padding: 0 0 0 var(--app-interval);
  }
}
</style>